{% extends 'todo/base.html' %}

{% block content %}
    <div class="stats-card">
        <h3>任务统计</h3>
        <p>总任务数: {{ todos.count }}</p>
        <p>已完成: {{ completed_percentage|floatformat:0 }}%</p>
        {% if graphic %}
            <img src="data:image/png;base64,{{ graphic }}" alt="任务完成情况图表">
        {% endif %}
    </div>

    <h2>任务列表</h2>
    <div style="margin-bottom: 15px;">
        <strong>筛选:</strong>
        <a href="{% url 'index' %}">全部</a> |
        <a href="{% url 'filter_by_category' 0 %}">未分类</a> |
        {% for cat in categories %}
            <a href="{% url 'filter_by_category' cat.id %}" class="category-tag">{{ cat.name }}</a>
        {% endfor %}
    </div>

    {% for todo in todos %}
        {% with priority_val=todo.priority|stringformat:"s" %}
        <div class="todo-item {% if priority_val == '3' or priority_val == 'H' %}priority-high{% elif priority_val == '2' or priority_val == 'M' %}priority-medium{% else %}priority-low{% endif %} {% if todo.completed %}completed{% endif %}">
            <h3>{{ todo.title }}</h3>
            <p>{{ todo.content|truncatechars:80 }}</p>

            {% if todo.category %}
                <span class="category-tag">{{ todo.category.name }}</span>
            {% endif %}

            <div class="due-date">
                {% if todo.due_date %}
                    截止日期: {{ todo.due_date|date:"Y-m-d H:i" }}
                    {% if not todo.completed and todo.due_date < now %}
                        <span style="color: red; font-weight: bold;"> (已过期)</span>
                    {% endif %}
                {% endif %}
            </div>

            <span class="priority-badge">
                {% if priority_val == '3' or priority_val == 'H' %}高
                {% elif priority_val == '2' or priority_val == 'M' %}中
                {% else %}低
                {% endif %}
            </span>

            <form action="{% url 'toggle_completed' todo.id %}" method="post" style="display: inline-block;">
                {% csrf_token %}
                <button type="submit">{% if todo.completed %}标记为未完成{% else %}标记为完成{% endif %}</button>
            </form>
            <a href="{% url 'edit_todo' todo.id %}" style="margin: 0 10px;">编辑</a>
            <form action="{% url 'delete_todo' todo.id %}" method="post" style="display: inline-block;">
                {% csrf_token %}
                <button type="submit" onclick="return confirm('确定删除吗？')">删除</button>
            </form>
        </div>
        {% endwith %}
    {% empty %}
        <p>还没有待办事项，快去新增一个吧～</p>
    {% endfor %}
{% endblock %}